<template>
  <div class="custom-list-container">
    <el-card shadow="hover">
      <template #header>
        <div class="clearfix">
          <span>自定义数据列表</span>
          <el-button style="float: right; padding: 3px 0" type="text" @click="closeList">
            关闭
          </el-button>
        </div>
      </template>
      <el-table :data="listData" stripe style="width: 100%">
        <el-table-column prop="name" label="名称" align="center"></el-table-column>
        <el-table-column prop="code" label="代码" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template #default="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
              {{ scope.row.status === 'active' ? '活跃' : '非活跃' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'CustomList',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      listData: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  watch: {
    visible(val) {
      if (val) {
        this.fetchData();
      }
    }
  },
  mounted() {
    if (this.visible) {
      this.fetchData();
    }
  },
  methods: {
    fetchData() {
      // 模拟从API获取数据
      setTimeout(() => {
        const mockData = Array.from({ length: this.total || 25 }).map((_, index) => ({
          id: index + 1,
          name: `项目${index + 1}`,
          code: `CODE${index + 100}`,
          status: index % 2 === 0 ? 'active' : 'inactive',
          updateTime: new Date().toLocaleDateString()
        }));
        this.listData = mockData.slice(0, this.pageSize);
        this.total = 25;
      }, 500);
    },
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    closeList() {
      this.$emit('close');
    }
  }
}
</script>

<style scoped>
.pagination-container {
  margin-top: 15px;
  display: flex;
  justify-content: center;
}
</style>